<template>
	<div class="NotFind">
		<vue-particles color="#fff" :particleOpacity="0.7" :particlesNumber="80" shapeType="star" :particleSize="4"
		 linesColor="#fff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="2"
		 :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" class="particles">
		</vue-particles>
		<div class="panel">
			<div class="paneltitle">
				<h2>404错误！抱歉您要找的页面不存在</h2>
				<p>
					<el-button type="danger" @click="backHome">返回首页</el-button>
					<el-button @click="thinks">保证不打死管理员</el-button>
				</p>

			</div>
			<div class="content">
				<div class="float-left" :style="{marginLeft:marginLeft+'px'}">
					<img src="../assets/ds-1.gif">
					<div class="alert"> 卧槽！页面不见了！ </div>
				</div>
				<div class="float-right" style="z-index:100;">
					<img src="../assets/ds-2.png" width="260">
				</div>
				<hr class="hr">
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				marginLeft: 0.,
				interval: null
			}
		},
		mounted() {
			var self = this;

			function show() {
				if (self.marginLeft >= window.innerWidth) {
					self.marginLeft = 0
				} else if (self.marginLeft >= 0 && self.marginLeft < window.innerWidth) {
					self.marginLeft += 2
				}
				setTimeout(show, 100);
			}
			show();
		},
		methods: {
			backHome() {
				this.$router.push('/');
			},
			thinks(){
				this.$message({
					type:'success',
					message:'感谢体谅管理员！'
				})
			}
		}
	}
</script>

<style scoped>
	.NotFind {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		background-image: url(../assets/bg.jpg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.particles {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.panel {
		border-bottom: solid 1px #ddd;
		border-radius: 4px;
		z-index: 1000;
		color: white;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.panelTitle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.paneltitle h2 {
		text-align: center;
	}

	.paneltitle p {
		text-align: center;
		padding: 20px;
	}

	.content {
		display: flex;
		width: 100%;
		position: relative;
	}

	.alert {
		padding-top: 15px;
		text-align: center;
		font-size: 18px;
	}

	.hr {
		width: 100%;
		height: 1px;
		background-color: white;
		position: absolute;
		bottom: 63px;
		border: none;
	}
</style>
